<template>
  <Swiper :class="cfg.swiper_type === 'center' ? 'x-center-swiper' : 'x-center-border-swiper'"
    :autoplay="cfg.autoplay === 'true' ? { delay: (cfg.delay * 1000) || 3000, disableOnInteraction: false } : false"
    :centered-slides="true" :slides-per-view="cfg.data.length > 3 ? 2.5 : 2" :style="{ top: cfg.style.top }"
    :watch-slides-progress="true" :loop="true" :looped-slides="cfg.data.length" @progress="onProgress"
    @setTransition="onSetTransition" @init="onInit">
    <swiper-slide v-for="x, i in cfg.data" :key="x.id" class="x-center-swiper-item">
      <div v-if="x.title" class="swiper-item-title text-center relative text-[#244965] z-10 mb-5px">
        {{ x.title }}
      </div>
      <swiper-child-item :data="x" :real-index="i" :axis-id="cfg.axis_id" :swiper="swiperExp" />
    </swiper-slide>
  </Swiper>
</template>
<script lang="ts" setup name="SwiperCenter">

const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
});
const swiperExp = ref(null)

const onInit = (swiper) => {
  swiperExp.value = swiper
}

const boxCenterWidth = computed(() => Number(window.innerWidth * 0.3));

const onProgress = (swiper) => {
  for (let i = 0; i < swiper.slides.length; i++) {
    const slide = swiper.slides.eq(i);
    const slideProgress = swiper.slides[i].progress;
    let modify = 1;
    if (Math.abs(slideProgress) > 1) {
      modify = (Math.abs(slideProgress) - 1) * 0.15 + 1;
    }
    const translate = slideProgress * modify * (boxCenterWidth.value / 2) + "px";
    const scale = 1 - Math.abs(slideProgress) / (swiper.slides.length / 2);
    const zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
    slide.transform("translateX(" + translate + ") scale(" + scale + ")");
    slide.css("zIndex", zIndex);
    slide.css("opacity", 1);
    if (Math.abs(slideProgress) > 3) {
      slide.css("opacity", 0);
    }
  }
};

const onSetTransition = (swiper, transition) => {
  for (var i = 0; i < swiper.slides.length; i++) {
    var slide = swiper.slides.eq(i);
    slide.transition(transition);
  }
};
</script>

<style scoped lang="scss">
.x-center-swiper {
  @apply absolute overflow-hidden left-0 z-100;
  top: 35%;
  width: 100vw;

  :deep() {
    .x-center-swiper-item {
      transition-duration: 300ms;
    }
  }
}

.x-center-border-swiper {
  @apply absolute overflow-hidden left-0 z-100;
  top: 35%;
  width: 100vw;

  :deep() {
    .x-center-swiper-item {
      @apply backdrop-filter backdrop-blur-10px;
      padding: 10px;
      transition-duration: 300ms;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(215, 228, 255, 0.41) 0%, rgba(215, 228, 255, 0.11) 100%);
      border: 1px solid rgba(255, 255, 255, 0.6);
    }

    // .swiper-slide-active {
    //   opacity: 1 !important;
    // }

    // .swiper-slide-prev,
    // .swiper-slide-next {
    //   opacity: 0.8 !important;
    // }
  }

}
</style>